<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Proxy+Reflect3</title>
</head>
<style>
  body {
    padding: 24px;
  }

  .code-box {
    width: 600px;
    margin: auto;
  }

  .excute-box {
    width: 600px;
    margin: 12px auto;
  }

  .output-box {
    width: 600px;
    margin: auto;
  }
</style>

<body>
  <div class="code-box">
    代码
    <pre>
      function main() {
        const orgTimeout = setTimeout;
        const timers = [];
        const handle1 = {
          apply: function (target, thisArg, argumentsList) {
            timerId = target.call(thisArg, argumentsList[0], argumentsList[1] * 4);
            timers.push(timerId)
          },
        }
        setTimeout = new Proxy(orgTimeout, handle1);
        let output = ''
        // console.log(sum(1, 2));
        orgTimeout(() => {
          output += '原始timer + 1\n'
          document.getElementById('log').value = output;
        }, 1000);
        // Expected output: 3
        setTimeout(() => {
          output += "代理timer + 2\n"
          document.getElementById('log').value = output;
        }, 1000)
      }
      const elRun = document.getElementsByClassName('btn-run')[0];
      elRun.addEventListener('click', main)
    </pre>
  </div>
  <div class="excute-box">
    <button class="btn-run">运行</button>
  </div>
  <div class="output-box">
    <textarea id="log" rows="10" cols="80"></textarea>
  </div>
</body>
<script>
  function main() {
    const largeArray = [];
    for (let i = 0; i < 100000; i++) {
      largeArray.push('yaogang'.repeat(1000))
    }
    const orgTimeout = setTimeout;
    const timers = [];
    const handle1 = {
      apply: function (target, thisArg, argumentsList) {
        timerId = target.call(thisArg, argumentsList[0], argumentsList[1] * 10);
        timers.push(timerId)
      },
    }
    setTimeout = new Proxy(orgTimeout, handle1);
    let output = ''
    // console.log(sum(1, 2));
    orgTimeout(() => {
      output += '原始timer + 1\n'
      document.getElementById('log').value = output;
    }, 1000);
    // Expected output: 3
    setTimeout(() => {
      output += "代理timer " + largeArray.length + '\n'
      document.getElementById('log').value = output;
    }, 1000)
  }
  const elRun = document.getElementsByClassName('btn-run')[0];
  elRun.addEventListener('click', main)
</script>

</html>